import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Card, Breadcrumb, Form, Button, Space, Input, Radio, Upload, Modal, message } from 'antd'
import Channel from 'components/Channel'
import { PlusOutlined } from '@ant-design/icons'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import styles from './index.module.scss'
import { baseURL } from 'utils/request'
import { addAritcle, getArticleById, updateArticle } from 'api/article'
import history from 'utils/history'

export default class ArticlePublish extends Component {
  render() {
    // 配置了动态路由，修改文章可以通过获取到文章 id
    // console.log('this.props.match', this.props.match)
    // 解构出 state 的数据方便使用
    const { id, previewUrl, showPreview, type, fileList } = this.state
    return (
      <Card
        className={styles.root}
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to='/home'>首页</Link>
            </Breadcrumb.Item>
            {id && (
              <Breadcrumb.Item>
                <Link to='/home/list'>文章列表</Link>
              </Breadcrumb.Item>
            )}
            <Breadcrumb.Item>{id ? '编辑文章' : '发布文章'}</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form
          ref={this.formRef}
          initialValues={{ title: '测试默认标题', content: '测试默认内容', channel_id: 0, type: type }}
          labelCol={{ span: 4 }}
          size='large'
          onFinish={this.onFinish}
          validateTrigger={['onBlur', 'onChange']}
        >
          {/* 标题 */}
          <Form.Item label='标题' name='title' rules={[{ required: true, message: '文章的标题不能为空' }]}>
            <Input placeholder='请输入文章的标题' />
          </Form.Item>
          {/* 频道 */}
          <Form.Item label='频道' name='channel_id' rules={[{ required: true, message: '请选择频道' }]}>
            <Channel />
          </Form.Item>
          {/* 内容 */}
          <Form.Item label='内容' name='content' rules={[{ required: true, message: '文章的内容不能为空' }]}>
            <ReactQuill theme='snow' placeholder='请输入文章的内容' />
          </Form.Item>
          {/* 封面 - 单选框 */}
          <Form.Item label='封面' name='type'>
            <Radio.Group onChange={this.changeType}>
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
              <Radio value={0}>无图</Radio>
            </Radio.Group>
          </Form.Item>
          {/* 封面 - 上传组件 */}
          <Form.Item wrapperCol={{ offset: 4 }}>
            {type !== 0 && (
              // fileList: 控制文件列表
              // action: 控制上传的url 保证是一个完整的url
              // name： 用于指定名字
              <Upload
                listType='picture-card'
                fileList={fileList}
                action={`${baseURL}upload`}
                name='image'
                onChange={this.uploadImage}
                onPreview={this.handlePreview}
                beforeUpload={this.beforeUpload}
              >
                {fileList.length < type && <PlusOutlined />}
              </Upload>
            )}
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button type='primary' htmlType='submit' onClick={() => this.changeDraft(false)}>
                {id ? '编辑文章' : '发布文章'}
              </Button>
              <Button htmlType='submit' onClick={() => this.changeDraft(true)}>
                存入草稿
              </Button>
            </Space>
          </Form.Item>
        </Form>
        {/* 弹窗，用于显示预览的图片 */}
        <Modal visible={showPreview} title='图片预览' footer={null} onCancel={this.handleCancel}>
          <img alt='example' style={{ width: '100%' }} src={previewUrl} />
        </Modal>
      </Card>
    )
  }

  // 获取表单组件
  formRef = React.createRef()

  state = {
    // 文章的封面类型
    type: 1,
    // 用于控制上传的图片以及图片的显示
    fileList: [],
    showPreview: false,
    previewUrl: '',
    draft: false,
    // 编辑的id
    id: this.props.match.params.id,
  }

  async componentDidMount() {
    console.log('componentDidMount 组件挂载')
    if (this.state.id) {
      // 需要发请求，获取文章详细信息
      const res = await getArticleById(this.state.id)
      console.log('res', res)
      const values = {
        ...res.data,
        type: res.data.cover.type,
      }
      // 给表单设置values值，渲染文章详情
      this.formRef.current.setFieldsValue(values)
      // 渲染封面
      const fileList = res.data.cover.images.map((item) => ({ url: item }))
      // console.log('fileList', fileList)
      this.setState({
        fileList,
        type: res.data.cover.type,
      })
    }
  }

  componentWillUnmount() {
    console.log('componentWillUnmount 组件卸载(销毁)')
  }

  changeDraft = (draft) => {
    this.setState({
      draft,
    })
  }

  // 上传前的校验
  beforeUpload = (file) => {
    // console.log(file)
    // 判断图片的带下 不能超过 500k
    if (file.size >= 1024 * 500) {
      message.warn('上传的文件不能超过500kb')
      return Upload.LIST_IGNORE
    }
    if (!['image/png', 'image/jpeg'].includes(file.type)) {
      message.warn('只能上传jpg或者png的图片')
      return Upload.LIST_IGNORE
    }
    return true
  }

  // 情况1：如果 fileList 是将来后端回显的，通过 url 就能够访问到
  // 情况2：如果 fileList 的文件是上传的，需要通过 file.response.data.url 获取
  handlePreview = (file) => {
    console.log(file)
    const url = file.url || file.response.data.url
    this.setState({
      showPreview: true,
      previewUrl: url,
    })
  }

  handleCancel = () => {
    this.setState({
      showPreview: false,
      previewUrl: '',
    })
  }

  uploadImage = ({ fileList }) => {
    // 把 fileList 修改到 state 中，显示上传的图片
    this.setState({
      fileList,
    })
  }

  changeType = (e) => {
    this.setState({
      type: e.target.value,
      // 切换封面类型的时候，清空以前选择的图片
      fileList: [],
    })
  }

  onFinish = async (values) => {
    const { fileList, type, draft } = this.state
    // 校验图片数量
    if (fileList.length !== type) return message.warn('上传的图片数量不正确')
    // 根据 fileList 得到 images 参数，并处理两种图片地址情况
    const images = fileList.map((item) => item.url || item.response.data.url)
    // 通用请求参数
    const reqParams = {
      ...values,
      cover: { type, images },
      // 是否存草稿
      draft,
    }
    // 获取是否有文章 id
    const { id } = this.state
    if (id) {
      // 情况1：有文章id，编辑文章
      reqParams.id = id
      await updateArticle(reqParams)
    } else {
      // 情况2：无文章id，发布新文章
      await addAritcle(reqParams)
    }
    console.log('检查请求参数', reqParams)
    // 提示
    message.success(`${id ? '修改' : '发布新文章'}成功`)
    // // 跳转
    history.push('/home/list')
  }
}
